<template>
  <div>
    <el-tooltip :content="$t('msg.navBar.guide')">
      <div @click="onClick" id="guide-start">
        <svg-icon icon="guide"></svg-icon>
      </div>
    </el-tooltip>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { driver } from 'driver.js'
import 'driver.js/dist/driver.css'
import { useI18n } from 'vue-i18n'
import steps from './steps'

const i18n = useI18n()

let driverObj = null
onMounted(() => {
  driverObj = driver({
    showProgress: true,
    steps: steps(i18n)
  })
})

const onClick = () => {
  driverObj.drive()
}
</script>
